.data-stats {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: rgba(128, 128, 128, 0.1); /* 添加浅灰色背景 */
  cursor: pointer;
  user-select: none;
  
  // 主背景图片定位
  &::before {
    content: '';
    position: absolute;
    left: 118px;  // 3555 - 3437 = 118px (将主背景图定位到正确位置)
    top: 0;
    width: 224px; // 原始主背景宽度
    height: 77px; // 原始主背景高度
    background-image: var(--background-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .main-data-area {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    z-index: 2; // 确保内容在背景图之上
    
    .value-container {
      display: flex;
      align-items: baseline;
      position: absolute;
      left: 187px;  // 118 + 69 = 187px (调整到新的相对位置)
      top: 31px;    // 247 - 216 = 31px
      gap: 4px;
      
      .main-value {
        white-space: nowrap;
        text-align: left;
        transition: all 0.3s ease;
        
        // Gradient text effect
        &.gradient-text {
          background: linear-gradient(90deg, #FFFFFF 0%, #81C6FF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
      }
      
      .unit {
        white-space: nowrap;
        text-align: left;
        transition: color 0.3s ease;
        margin-left: 4px; // Small gap between value and unit
      }
    }
    
    .data-title {
      position: absolute;
      left: 148px;  // 118 + 30 = 148px (调整到新的相对位置)
      top: 92px;    // 308 - 216 = 92px
      white-space: nowrap;
      text-align: left;
      transition: color 0.3s ease;
    }
  }

  .bottom-panel {
    position: absolute;
    left: 0;      // 现在对齐到组件左侧
    top: 140px;   // 356 - 216 = 140px
    width: 460px;
    height: 46px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    pointer-events: none; // 防止底部面板阻挡点击事件
    
    .left-text {
      position: absolute;
      left: 20px;   // 3457 - 3437 = 20px
      top: 11px;    // 367 - 356 = 11px
      white-space: nowrap;
      text-align: left;
      transition: color 0.3s ease;
    }
    
    .right-text {
      position: absolute;
      right: 71px;  // 460 - (3789 - 3437) - 88 = 71px from right
      top: 11px;    // 367 - 356 = 11px
      white-space: nowrap;
      text-align: left;
      transition: color 0.3s ease;
    }
  }

  // Theme variants
  &.light {
    .main-value,
    .unit,
    .data-title,
    .left-text,
    .right-text {
      filter: brightness(0.8);
    }
  }

  &.dark {
    // Default dark theme styles
  }

  // Responsive adjustments
  @media (max-width: 768px) {
    .main-data-area {
      .value-container {
        left: calc(69px * 0.8);
        top: calc(31px * 0.8);
        
        .main-value {
          font-size: calc(28px * 0.8) !important;
        }
        
        .unit {
          font-size: calc(16px * 0.8) !important;
        }
      }
      
      .data-title {
        left: calc(30px * 0.8);
        top: calc(92px * 0.8);
        font-size: calc(16px * 0.8) !important;
      }
    }

    .bottom-panel {
      left: calc(-118px * 0.8);
      top: calc(140px * 0.8);
      width: calc(460px * 0.8);
      height: calc(46px * 0.8);
      
      .left-text,
      .right-text {
        font-size: calc(16px * 0.8) !important;
      }
      
      .left-text {
        left: calc(20px * 0.8);
        top: calc(11px * 0.8);
      }
      
      .right-text {
        right: calc(71px * 0.8);
        top: calc(11px * 0.8);
      }
    }
  }

  // Hover effects
  &:hover {
    .main-value {
      transform: scale(1.02);
      text-shadow: 0 0 8px rgba(26, 215, 255, 0.5);
    }
    
    .unit,
    .data-title,
    .left-text,
    .right-text {
      opacity: 0.9;
    }
  }

  // Active state
  &:active {
    transform: scale(0.98);
  }

  // Animation for value changes
  .main-value {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.6s ease-out;
  }

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // Focus accessibility
  &:focus-visible {
    outline: 2px solid #1AD7FF;
    outline-offset: 2px;
    border-radius: 4px;
  }

  // Disabled state
  &.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }

  // High contrast mode
  @media (prefers-contrast: high) {
    .main-value,
    .unit,
    .data-title,
    .left-text,
    .right-text {
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
  }

  // Reduced motion
  @media (prefers-reduced-motion: reduce) {
    .main-value,
    .unit,
    .data-title,
    .left-text,
    .right-text {
      transition: none;
      animation: none;
    }
    
    &:hover .main-value {
      transform: none;
    }
  }
} 